<template>
  <div class="main">
    <div class="title">
      <div style="margin-top:13px"><img src="../../assets/contract/img_hetongweishi.png" alt=""></div>
      <div>
        <p style="font-size:20px">劳动合同卫士</p>
        <p style="font-size:14px">告别范本陷阱，一站解决劳动合同全系列问题：条款合规、签署效率和证据保全</p>
        <p><a style="font-size:30px;font-weight:bold">1980</a>元/年</p>
        <p @click="subscribe()"><el-button type="danger">立即订阅</el-button></p>
      </div>
    </div>
    <div class="contant">
      <div class="con-title"><span>功能介绍</span></div>
      <div class="big-img"><img src="../../assets/contract/img_banner.jpg" alt=""></div>
      <div class="img-bottom"><img src="../../assets/contract/img_bottom.jpg" alt=""></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    subscribe() {
      this.$router.push({ path: '/aggregation/pay' })
    }
  }
}
</script>

<style scoped>
p{
  margin:15px 0;
}
.title{
  overflow: hidden;
  height:190px;
  background:#fff;
  margin:20px;
}
.title>div{
  display:inline-block;
  float:left;
}
/deep/.el-button--danger{
  background:#E30A0D;
  border-radius:25px;
  width:130px;
}
.contant{
  background:#fff;
  margin:0 20px;
  padding:20px;
}
.con-title{
  height:50px;
  border-bottom:1px solid #eee;
}
.con-title>span{
  display:inline-block;
  height:100%;
  border-bottom:2px solid #ED1E21;
  width:70px;
  line-height: 50px;
  text-align: center;
}
.big-img{
  margin:20px 0 50px 0;
}
.big-img>img{
  width:100%;
}
.img-bottom{
  margin-left:10px;
}
</style>
